<template>
  <div id="app">
    <a-config-provider :locale="getLocale" :theme="getTheme">
      <router-view />
    </a-config-provider>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onBeforeUnmount } from 'vue';
  import { useResponsiveStore } from '@/store/responsive';
  import { useAppStore } from './store/app';
  import { storeToRefs } from 'pinia';

  const appStore = useAppStore();
  const { getTheme, getLocale } = storeToRefs(appStore);

  const responsiveStore = useResponsiveStore();

  onMounted(() => {
    window.addEventListener('resize', responsiveStore.updateScreenSize);
  });

  onBeforeUnmount(() => {
    window.removeEventListener('resize', responsiveStore.updateScreenSize);
  });
</script>

<style scoped></style>
